<script setup lang="ts">
  import routeComponentName from '@/config/route-component-name'
  import { computed, onMounted, onUnmounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import useSparePartApplyDetail from '@/services/module/store/useSparePartApplyDetail'
  import SingleAddress from '@/components/business/address/single-address/SingleAddress.vue'
  import { ElMessageBox, TableColumnCtx } from 'element-plus'
  import {
    applySparePartApprovePass,
    applySparePartApproveReject,
    checkSparePartApplyForPass,
    checkSparePartApplyForReject,
    sparePartApplyReverse,
    sparePartApplyReverseCheck,
  } from '@/api/store'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import PositingModal from './components/posting-modal.vue'
  import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
  import useCurrentRoleStore from '@/store/modules/current-role'
  import useCheckStockForSparePartApplyCheckService from '@/services/module/store/useCheckStockForSparePartApplyCheckService'
  import { useNetworkAmountLimitService } from '@/services/module/network/useNetworkAmountLimitService'

  const { networkAmountLimit, getAmountLimitLoading, getNetworkAmount } =
    useNetworkAmountLimitService()
  const { checkStockLoading, checkStockParam, checkStockResult, checkStock } =
    useCheckStockForSparePartApplyCheckService()
  const { currentRole } = useCurrentRoleStore()
  const { sparePartApplyDetail, getSparePartApplyDetailLoading, getSparePartApplyDetail } =
    useSparePartApplyDetail()

  defineOptions({
    name: routeComponentName.storage.sparePartApply.detail,
  })

  const oaMessageId = ref('')
  const positingModalVisible = ref(false)
  const route = useRoute()
  const address = computed(() => {
    return {
      province: sparePartApplyDetail.value.province || '',
      city: sparePartApplyDetail.value.city || '',
      area: sparePartApplyDetail.value.area || '',
      town: sparePartApplyDetail.value.town || '',
    }
  })
  const colorList = ref([
    { backgroundColor: '#e4eef8', color: '#007cff' },
    { backgroundColor: '#f5eee3', color: '#e69103' },
    { backgroundColor: '#d2f7f7', color: '#00c0c0' },
    { backgroundColor: '#eee9fa', color: '#a06eff' },
  ])
  const logStatus = ref(false)
  const orderTypeText = computed(() => {
    if (sparePartApplyDetail.value.type === 1) {
      return '收费销售订单'
    }

    if (sparePartApplyDetail.value.type === 2) {
      return '免费销售订单'
    }

    if (sparePartApplyDetail.value.type === 3) {
      return '免费销售订单(完全赠送)'
    }

    return ''
  })
  const checkForm = ref<{
    codeIsSufficientMap: Record<string, number>
    id: string
    warehouseMap: Record<string, string>
    orderQtyMap: Record<string, number>
  }>({
    id: '',
    codeIsSufficientMap: {},
    warehouseMap: {},
    orderQtyMap: {},
  })
  const allInventoryAddressSelected = ref('')
  const allInventoryAddressSelectPopoverVisible = ref(false)
  const isOrderQtyGreaterThanApplyQty = computed(() => {
    let errMsg = ''
    for (let i = 0; i < sparePartApplyDetail.value.materialApplyVoList.length; i++) {
      const sparePart = sparePartApplyDetail.value.materialApplyVoList[i]
      if (sparePart.orderQty > sparePart.qty) {
        errMsg = '订单数量不能大于申请数量'
        break
      }
    }
    return errMsg
  })

  const globalClickEvent = () => {
    allInventoryAddressSelectPopoverVisible.value = false
  }

  const onShowAllInventoryAddressSelectPopoverClick = () => {
    allInventoryAddressSelectPopoverVisible.value = true
    document.addEventListener('click', globalClickEvent)
  }

  const onAllInventoryAddressSelect = () => {
    sparePartApplyDetail.value.materialApplyVoList =
      sparePartApplyDetail.value.materialApplyVoList.map((item) => {
        if (item.warehouseList.includes(allInventoryAddressSelected.value)) {
          item.warehouse = allInventoryAddressSelected.value
        }
        return item
      })
    allInventoryAddressSelectPopoverVisible.value = false
  }

  const getDetail = async () => {
    await getSparePartApplyDetail(route.params.id as string, !!currentRole)
  }

  const getColor = (index: number) => {
    for (let i = 0; i < colorList.value.length; i++) {
      if (index % colorList.value.length === i) {
        return colorList.value[i]
      }
    }

    return colorList.value[0]
  }

  const init = async () => {
    if (route.params.id) {
      await getDetail()
      if (sparePartApplyDetail.value.status === 2) {
        sparePartApplyDetail.value.materialApplyVoList =
          sparePartApplyDetail.value.materialApplyVoList.map((item) => {
            item.orderQty = item.qty
            return item
          })
      }
      await getNetworkAmount(sparePartApplyDetail.value.networkId)
    }

    if (route.params.messageId) {
      oaMessageId.value = route.params.messageId as string
    }
  }

  const handleCheckRejectClick = () => {
    ElMessageBox({
      title: '提示',
      message: '是否审核驳回？',
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await checkSparePartApplyForReject(sparePartApplyDetail.value.id)
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              await getDetail()
              done()
              return
            }

            HMessageBox.error(res.data.message)
            return
          } catch (error) {
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
          }
        }

        done()
      },
    })
  }

  const handleReverseCheck = () => {
    const sapDeliveryNoList: Array<string> = []
    sparePartApplyDetail.value.materialApplyVoList.forEach((item) => {
      if (!sapDeliveryNoList.includes(item.sapDeliveryNo)) {
        sapDeliveryNoList.push(item.sapDeliveryNo)
      }
    })
    ElMessageBox({
      title: '提示',
      message: `反审核后将删除SAP交货单：${sapDeliveryNoList.join('、')}及销售订单：${
        sparePartApplyDetail.value.saleNo
      }`,
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await sparePartApplyReverseCheck(sparePartApplyDetail.value.id)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              await getDetail()
              done()
              return
            }

            HMessageBox.error(res.data.message)
            return
          } catch (error) {
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
          }
        }

        done()
      },
    })
  }

  const onReverseCheckClick = () => {
    ElMessageBox({
      title: '提示',
      message: '是否反过账？',
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await sparePartApplyReverse(sparePartApplyDetail.value.id)
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              getDetail()
              done()
              return
            }

            HMessageBox.error(res.data.message)
            return
          } catch (error) {
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
          }
        }

        done()
      },
    })
  }

  const getSummaries = (param: {
    columns: TableColumnCtx<WarehouseAPIResponse.SparePartApplyDetail['materialApplyVoList'][0]>[]
    data: Array<WarehouseAPIResponse.SparePartApplyDetail['materialApplyVoList'][0]>
  }) => {
    const sums: Array<string> = []
    param.columns.forEach((item, index) => {
      if (index === 0) {
        sums[index] = '合计'
      }

      if (item.property === 'qty') {
        let total = 0
        param.data.forEach((item) => {
          total += item.qty || 1
        })
        sums[index] = `${total}`
      }
      if (item.property === 'orderQty') {
        let total = 0
        param.data.forEach((item) => {
          total += item.orderQty || 0
        })
        sums[index] = `${total}`
      }

      if (item.property === 'totalPrice') {
        let total = 0
        param.data.forEach((item) => {
          total += (item.orderQty || 0) * (item.price || 0)
        })
        sums[index] = `￥${total.toFixed(2)}`
      }
    })
    return sums
  }

  const onApproveClick = (mode: 'pass' | 'reject') => {
    if (mode === 'pass' && isOrderQtyGreaterThanApplyQty.value) {
      HMessageBox.error(isOrderQtyGreaterThanApplyQty.value)
      return
    }

    const taskId = route.params.taskId as string
    const nodeInstanceId = route.params.nodeInstanceId as string
    const key = route.params.key as string
    if (taskId && nodeInstanceId && key) {
      ElMessageBox({
        title: '提示',
        message: mode === 'pass' ? '确认审核通过？' : '确认审核拒绝？',
        showCancelButton: true,
        autofocus: false,
        type: 'warning',
        async beforeClose(action, instance, done) {
          if (action === 'confirm') {
            try {
              instance.confirmButtonLoading = true
              instance.cancelButtonLoading = true
              const fn = mode === 'pass' ? applySparePartApprovePass : applySparePartApproveReject
              const res = await fn(taskId, key, nodeInstanceId)
              instance.confirmButtonLoading = false
              instance.cancelButtonLoading = false
              if (res.data.code === 20000) {
                HMessage.success('操作成功')
                await getDetail()
                done()
                return
              }
              HMessageBox.error(res.data.message)
              return
            } catch (error) {
              HMessageBox.error('审核失败，请稍后重试')
            }
          }

          done()
        },
      })
    }
  }

  const onCheckPassClick = async () => {
    if (sparePartApplyDetail.value.materialApplyVoList.some((item) => !item.warehouse)) {
      HMessageBox.error('请选择库存地址')
      return
    }

    if (isOrderQtyGreaterThanApplyQty.value) {
      HMessageBox.error(isOrderQtyGreaterThanApplyQty.value)
      return
    }

    checkForm.value.id = sparePartApplyDetail.value.id
    sparePartApplyDetail.value.materialApplyVoList.forEach((sparePart) => {
      checkStockParam.value[sparePart.spareCode] = sparePart.orderQty
    })
    const errMsg = await checkStock(sparePartApplyDetail.value.id)
    if (errMsg) {
      HMessageBox.error(errMsg)
      return
    }

    const noStockGoodCodeList: Array<string> = []
    for (const key in checkStockResult.value.codeIsSufficientMap) {
      const value = checkStockResult.value.codeIsSufficientMap[key]
      if (value === 0) {
        noStockGoodCodeList.push(key)
      }
    }

    checkForm.value.codeIsSufficientMap = checkStockResult.value.codeIsSufficientMap
    sparePartApplyDetail.value.materialApplyVoList.forEach((item) => {
      checkForm.value.orderQtyMap[item.spareCode] = item.orderQty
    })

    let elMessageBoxTip = '是否审核通过？'
    if (noStockGoodCodeList.length >= 1) {
      elMessageBoxTip = `编号为：${noStockGoodCodeList.join(',')}的配件库存不足，是否审核通过？`
    }

    sparePartApplyDetail.value.materialApplyVoList.forEach((item) => {
      checkForm.value.warehouseMap[item.spareCode] = item.warehouse
    })

    ElMessageBox({
      title: '提示',
      message: elMessageBoxTip,
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await checkSparePartApplyForPass(checkForm.value)
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            if (res.data.code === 20000) {
              HMessage.success('操作成功')
              done()
              getDetail()
              return
            }

            HMessageBox.error(res.data.message)
            return
          } catch (error) {
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
          }
        }

        done()
      },
    })
  }

  onMounted(() => {
    init()
  })

  onUnmounted(() => {
    document.removeEventListener('click', globalClickEvent)
  })
</script>

<template>
  <div
    v-loading="getSparePartApplyDetailLoading || getAmountLimitLoading || checkStockLoading"
    class="spare-part-form-page"
  >
    <div class="page-container">
      <div class="content">
        <div class="header">
          <div class="status">
            <div class="title">{{ sparePartApplyDetail.code }}</div>
            <h-status v-if="sparePartApplyDetail.status === 1">待提交</h-status>
            <h-status v-if="sparePartApplyDetail.status === 2" type="warning">待审核</h-status>
            <h-status v-if="sparePartApplyDetail.status === 3" type="warning">待过账</h-status>
            <h-status v-if="sparePartApplyDetail.status === 4" type="error">审核驳回</h-status>
            <h-status v-if="sparePartApplyDetail.status === 5">已过账</h-status>
          </div>
          <div class="btn-group">
            <template v-if="sparePartApplyDetail.status === 2">
              <!-- 赠送单 -->
              <template v-if="sparePartApplyDetail.type === 3">
                <!-- 登录之后渲染的 -->
                <template v-if="currentRole">
                  <h-plain-button v-permission="'spareApplyPass'" @click="onApproveClick('pass')">
                    审核通过
                  </h-plain-button>
                  <h-plain-button
                    v-permission="'spareApplyReject'"
                    type="error"
                    @click="onApproveClick('reject')"
                  >
                    审核驳回
                  </h-plain-button>
                </template>

                <!-- 免登录的 -->
                <template v-else>
                  <h-plain-button @click="onApproveClick('pass')"> 审核通过 </h-plain-button>
                  <h-plain-button type="error" @click="onApproveClick('reject')">
                    审核驳回
                  </h-plain-button>
                </template>
              </template>

              <!-- 免费单和收费单 -->
              <template v-else>
                <!-- 登录之后渲染的 -->
                <template v-if="currentRole">
                  <h-plain-button v-permission="'approve'" @click="onCheckPassClick">
                    审核通过
                  </h-plain-button>
                  <h-plain-button
                    v-permission="'approvalRejected'"
                    type="error"
                    @click="handleCheckRejectClick"
                  >
                    审核驳回
                  </h-plain-button>
                </template>

                <!-- 免登录的 -->
                <template v-else>
                  <h-plain-button @click="onCheckPassClick"> 审核通过 </h-plain-button>
                  <h-plain-button type="error" @click="handleCheckRejectClick">
                    审核驳回
                  </h-plain-button>
                </template>
              </template>
            </template>
            <h-plain-button
              v-if="sparePartApplyDetail.status === 3"
              v-permission="'antiAudit'"
              @click="handleReverseCheck"
            >
              反审核
            </h-plain-button>
            <div v-if="sparePartApplyDetail.status === 3" @click="positingModalVisible = true">
              <h-plain-button v-if="currentRole" v-permission="'postingSaleOrder'">
                过账
              </h-plain-button>
              <h-plain-button v-else>过账</h-plain-button>
            </div>
            <h-plain-button
              v-if="sparePartApplyDetail.status === 5"
              v-permission="'antiPostingSaleOrder'"
              @click="onReverseCheckClick"
            >
              反过账
            </h-plain-button>
          </div>
        </div>
        <div class="form">
          <div class="title"> 基本信息 </div>
          <el-form label-position="top" inline-message>
            <!-- 销售订单号 -->
            <el-form-item label="销售订单号">
              <el-input :model-value="sparePartApplyDetail.saleNo" disabled />
            </el-form-item>

            <!--单据类型-->
            <el-form-item label="单据类型">
              <el-input :model-value="orderTypeText" disabled />
            </el-form-item>

            <!-- 经销商编号 -->
            <el-form-item v-if="currentRole && currentRole.roleType === 1" label="经销商编号">
              <el-input v-model.trim="sparePartApplyDetail.networkCode" disabled />
            </el-form-item>

            <!-- 经销商名称 -->
            <el-form-item v-if="currentRole && currentRole.roleType === 1" label="经销商名称">
              <el-input v-model.trim="sparePartApplyDetail.networkName" disabled />
            </el-form-item>

            <!-- 可用额度 -->
            <el-form-item v-if="currentRole && currentRole.roleType === 1" label="可用额度">
              <el-input :model-value="networkAmountLimit.freeAmount" disabled />
            </el-form-item>

            <!--收货仓-->
            <el-form-item label="收货仓">
              <el-input v-model.trim="sparePartApplyDetail.receivingStoreName" disabled />
            </el-form-item>

            <!--联系人姓名-->
            <el-form-item label="联系人姓名">
              <el-input v-model.trim="sparePartApplyDetail.contactName" disabled />
            </el-form-item>

            <!--联系人手机号-->
            <el-form-item label="联系人手机号">
              <el-input v-model.trim.number="sparePartApplyDetail.contactPhone" disabled />
            </el-form-item>

            <!--收货地址-->
            <el-form-item label="收货地址">
              <single-address :address="address" disabled />
            </el-form-item>

            <!--详细地址-->
            <el-form-item label="详细地址">
              <el-input v-model.trim="sparePartApplyDetail.detailAddress" disabled />
            </el-form-item>

            <!--单据备注-->
            <el-form-item label="单据备注">
              <el-input v-model.trim="sparePartApplyDetail.orderRemark" disabled />
            </el-form-item>

            <!--附件-->
            <el-form-item
              v-if="sparePartApplyDetail.type === 3"
              label="附件"
              class="annex-form-item"
            >
              <div class="file-upload-box">
                <div class="file-list">
                  <h-image
                    v-for="(file, fileIndex) in sparePartApplyDetail.attachmentList"
                    :key="fileIndex"
                    :src="file"
                    :width="80"
                    :height="50"
                    :show-del-btn="false"
                    :padding="2"
                    :preview-src-list="sparePartApplyDetail.attachmentList"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="list">
          <div class="title">
            <div class="text">配件列表</div>
          </div>
          <el-table
            :border="true"
            :stripe="true"
            :resize="true"
            :data="sparePartApplyDetail.materialApplyVoList"
            show-summary
            :summary-method="getSummaries"
          >
            <!-- 序号 -->
            <el-table-column type="index" label="序号" width="50" :align="'center'" fixed="left" />

            <!-- 交货单号 -->
            <el-table-column label="交货单号" prop="sapDeliveryNo" width="100" />

            <!-- 配件编号 -->
            <el-table-column label="配件编号" prop="spareCode" width="100" />

            <!-- 配件名称 -->
            <el-table-column
              show-overflow-tooltip
              label="配件名称"
              prop="spareName"
              min-width="140"
            />

            <!-- 库存地址 -->
            <el-table-column
              v-if="!currentRole || (currentRole && currentRole.roleType === 1)"
              label="库存地址"
              width="160"
            >
              <template #header>
                <div style="display: flex; align-items: center; column-gap: 4px">
                  <span>库存地址</span>
                  <el-popover
                    v-if="sparePartApplyDetail.status === 2"
                    placement="top"
                    :width="250"
                    :visible="allInventoryAddressSelectPopoverVisible"
                  >
                    <template #reference>
                      <h-plain-button
                        :height="20"
                        :padding-lr="6"
                        @click.stop="onShowAllInventoryAddressSelectPopoverClick"
                      >
                        批量
                      </h-plain-button>
                    </template>
                    <template #default>
                      <div style="display: flex; column-gap: 4px">
                        <el-select
                          v-model="allInventoryAddressSelected"
                          placeholder="请选择库存地址"
                        >
                          <el-option
                            v-for="(option, optionIndex) in sparePartApplyDetail.allWarehouseList"
                            :key="optionIndex"
                            :label="option"
                            :value="option"
                          />
                        </el-select>
                        <h-button type="primary" @click="onAllInventoryAddressSelect">
                          确定
                        </h-button>
                      </div>
                    </template>
                  </el-popover>
                </div>
              </template>
              <template #default="{ row }">
                <el-select
                  v-if="sparePartApplyDetail.status === 2"
                  v-model="row.warehouse"
                  placeholder="请选择库存地址"
                >
                  <el-option
                    v-for="(option, optionIndex) in row.warehouseList"
                    :key="optionIndex"
                    :label="option"
                    :value="option"
                  />
                </el-select>

                <template v-else>{{ row.warehouse }}</template>
              </template>
            </el-table-column>

            <!-- 申请数量 -->
            <el-table-column width="80" label="申请数量" prop="qty" />

            <!-- 订单数量 -->
            <el-table-column
              v-if="!currentRole || (currentRole && currentRole.roleType === 1)"
              width="170"
              label="订单数量"
              prop="orderQty"
            >
              <template #default="{ row }">
                <div style="display: flex; flex-direction: column; row-gap: 2px">
                  <div>
                    <el-input
                      v-if="sparePartApplyDetail.status === 2"
                      v-model.trim.number="row.orderQty"
                      placeholder="请输入订单数量"
                    />
                    <template v-else>{{ row.orderQty }}</template>
                  </div>
                  <div v-if="row.orderQty > row.qty" style="color: #f56c6c">
                    订单数量不能大于申请数量
                  </div>
                </div>
              </template>
            </el-table-column>

            <template v-if="!currentRole || (currentRole && currentRole.roleType === 1)">
              <!-- 即时库存 -->
              <el-table-column width="80" label="即时库存" prop="storeQty" />

              <!-- 冻结库存 -->
              <el-table-column width="80" label="冻结库存" prop="freezeQty" />

              <!-- 可用库存 -->
              <el-table-column width="80" label="可用库存">
                <template #default="{ row }">{{ row.storeQty - row.freezeQty }}</template>
              </el-table-column>
            </template>

            <!-- 规格 -->
            <el-table-column label="规格" prop="specName" width="120" />

            <!-- 分类 -->
            <el-table-column label="分类" prop="goodsType" width="120" />

            <!-- 单位 -->
            <el-table-column label="单位" prop="spareUnit" width="80" />

            <!-- 单价 -->
            <el-table-column label="单价" prop="price" width="100">
              <template #default="{ row }"> ￥{{ (row.price || 0).toFixed(2) }} </template>
            </el-table-column>

            <!-- 金额 -->
            <el-table-column label="金额" width="120" prop="totalPrice">
              <template #default="{ row }">
                ￥{{ ((row.price || 0) * (row.orderQty || 0)).toFixed(2) }}
              </template>
            </el-table-column>

            <!-- 备注 -->
            <el-table-column label="备注" width="160" prop="materialRemark" show-overflow-tooltip />

            <!-- 紧急程度 -->
            <el-table-column label="紧急程度" width="120">
              <template #default="{ row }">
                <template v-if="row.urgency === 1">一般</template>
                <template v-if="row.urgency === 2">紧急</template>
                <template v-if="row.urgency === 3">非常紧急</template>
              </template>
            </el-table-column>

            <!-- 反写失败原因 -->
            <el-table-column label="反写失败原因" width="120">
              <template #default="{ row }">
                <template v-if="row.isSync === 2">{{ row.failReason }}</template>
              </template>
            </el-table-column>

            <!-- 反写状态 -->
            <el-table-column label="反写状态" width="120" fixed="right" :align="'center'">
              <template #default="{ row }">
                <h-status v-if="row.isSync === 0" type="warning">待反写</h-status>
                <h-status v-if="row.isSync === 1">{{ `${row.syncType}成功` }}</h-status>
                <h-status v-if="row.isSync === 2" type="error">{{
                  `${row.syncType}失败`
                }}</h-status>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="!logStatus" class="show-logs-btn" @click="logStatus = true">
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
        <div v-else class="hide-logs-btn" @click="logStatus = false">
          <el-icon>
            <DArrowRight />
          </el-icon>
        </div>
      </div>

      <template v-if="logStatus">
        <div class="log-content-divider"></div>

        <el-scrollbar>
          <div class="log-list">
            <el-timeline style="max-width: 600px">
              <el-timeline-item
                v-for="(log, logIndex) in sparePartApplyDetail.spareApplyOrderLogList"
                :key="logIndex"
                :timestamp="log.gmtCreate"
                placement="top"
                :color="getColor(logIndex).color"
              >
                <div class="log-item">
                  <div
                    class="event"
                    :style="{
                      color: getColor(logIndex).color,
                      backgroundColor: getColor(logIndex).backgroundColor,
                    }"
                  >
                    {{ log.createEmp }} {{ log.event }}
                  </div>
                  <div class="divider"></div>
                  <div class="content">{{ log.content }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-scrollbar>
      </template>
    </div>

    <positing-modal
      v-model="positingModalVisible"
      :spare-part-apply-detail="sparePartApplyDetail"
      :message-id="oaMessageId"
      @update="getDetail"
    />
  </div>
</template>

<style scoped lang="scss">
  :deep(.el-timeline-item) {
    padding-bottom: 20px;
  }

  .file-upload-box {
    .file-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
  }

  .spare-part-form-page {
    width: 100%;
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .page-container {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;
      padding: 12px 0 12px 12px;
      display: flex;

      .content {
        flex: 1;
        width: 0;
        height: 100%;
        padding-right: 12px;
        position: relative;

        .show-logs-btn,
        .hide-logs-btn {
          position: absolute;
          top: 46px;
          width: 18px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
          z-index: 100;
          cursor: pointer;
          border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .show-logs-btn {
          right: 0;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;
        }

        .hide-logs-btn {
          right: -20px;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
        }

        .header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px dotted #d4d4d4;
          padding-bottom: 12px;
          margin-bottom: 12px;

          .status {
            display: flex;
            align-items: center;
            column-gap: 4px;

            .title {
              font-size: 16px;
              font-weight: bold;
            }
          }

          .btn-group {
            display: flex;
            column-gap: 8px;
          }
        }

        .form {
          .title {
            font-size: 14px;
            font-weight: bold;
          }

          :deep(.el-form) {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            row-gap: 12px;
            column-gap: 24px;

            .el-form-item {
              .el-form-item__label {
                margin: 0;
              }

              .el-form-item__content {
                .el-textarea {
                  .el-textarea__inner {
                    width: 100% !important;
                    max-height: 200px;
                    height: 28px;
                  }
                }
              }
            }

            .annex-form-item {
              grid-column-start: span 2;
            }
          }
        }

        .list {
          display: flex;
          flex-direction: column;
          row-gap: 4px;
          margin-top: 12px;

          .title {
            display: flex;
            column-gap: 2px;
            align-items: center;

            .text {
              font-size: 14px;
              font-weight: bold;
            }
          }
        }

        .log-status-change-btn {
          position: absolute;
          top: 0;
          right: 0;
          width: 24px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #e4eef8;
          color: #007cff;
          cursor: pointer;

          &:hover {
            background-color: #007cff;
            color: #fff;
          }
        }
      }

      .log-content-divider {
        width: 1px;
        background-color: rgba($color: #000000, $alpha: 0.1);
        height: 100%;
      }

      .log-list {
        width: 300px;
        padding: 0 12px 0 16px;

        .log-item {
          box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.1);
          box-sizing: border-box;
          padding: 10px;

          .event,
          .content {
            width: 100%;
            font-size: 12px;
            word-break: break-all;
            height: fit-content;
          }

          .event {
            padding: 4px 4px 4px 8px;
            box-sizing: border-box;
          }

          .content {
            color: #999;
          }

          .divider {
            background-color: rgba($color: #000000, $alpha: 0.1);
            height: 1px;
            width: 100%;
            margin: 10px 0;
          }
        }
      }
    }
  }
</style>
